<template>
	<view class="changePassword">
		<view class="nav-box">
			<view class="title">修改密码</view>
			<navigator open-type="navigateBack" class="iconfont iconfanhui icon-nav"></navigator>
		</view>
		<view class="form-box">
			<input type="password" class="input" placeholder="请输入旧密码" v-model="oldPassword" />
			<input type="password" class="input" placeholder="请输入新密码" v-model="newPassword" />
			<input type="password" class="input" placeholder="确认新密码" v-model="confirmPassword" />
		</view>
		<view class="button-box">
			<button type="primary" @click="savePassword">保存</button>
			<button type="default" @click="cancel">取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: "",
				newPassword: "",
				confirmPassword: "",
			};
		},
		methods: {
			savePassword() {
				if (!this.oldPassword || !this.newPassword || !this.confirmPassword) {
					return uni.showToast({ title: "请填写完整信息", icon: "none" });
				}
				if (this.newPassword !== this.confirmPassword) {
					return uni.showToast({ title: "两次输入的密码不一致", icon: "none" });
				}
				// 发送修改密码请求
				console.log("修改密码成功");
			},
			cancel() {
				uni.navigateBack();
			},
		},
	};
</script>

<style scoped>
.changePassword {
	padding: 20px;
}
.input {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.button-box {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
</style>
